<template>
  <div class="main_container">
    <el-row :gutter="5">
      <el-col :span="6">
        <div>
          <el-form :inline="true" :model="queryForm" :rules="rules" ref="queryForm">
            <el-form-item label="工单单号" label-position="left">
              <el-input
                  placeholder="请输入工单"
                  clearable
                  v-model="queryForm.sfaadocno">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-form>
            <el-form-item label="单据日期">
              <el-date-picker
                  v-model="queryForm.value"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-form style="margin-left:5rem;">
            <el-form-item>
              <div>
                <search title="成本中心" :url="searchWorkCenter" :table-fields="WorkCenterFields" index="sfaa068"
                        ref="searchWorkCenter" allowCheck="1"></search>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-form style="margin-left:3rem;">
            <el-form-item>
              <el-button type="primary" @click="queryShopOrderCompleteStock" icon="el-icon-search">
                查询工单信息
              </el-button>
              <el-button @click="resetForm('queryForm')" icon="el-icon-refresh">重置</el-button>
              <el-button type="warning" icon="el-icon-document-checked" @click="excelSupport">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 3rem;">
      <el-table
          v-loading="loading"
          :header-cell-style="{'text-align':'center',background:'#eef1f6'}"
          :cell-style="{'text-align':'center'}"
          :data="shopOrderData"
          height="650"
          border
          style="width: 100%">
        <el-table-column
            prop="sfaadocno"
            label="工单号"
            width="180"
            fixed="left">
        </el-table-column>
        <el-table-column
            prop="sfaadocdt"
            label="单据日期"
            width="180"
            fixed="left">
        </el-table-column>
        <el-table-column
            prop="sfaastus"
            label="工单状态">
        </el-table-column>
        <el-table-column
            prop="sfaa068"
            label="成本中心">
        </el-table-column>
        <el-table-column
            prop="sfaa010"
            label="生产料号">
        </el-table-column>
        <el-table-column
            prop="imaal"
            label="品名">
        </el-table-column>
        <el-table-column
            prop="imaal2"
            label="规格">
        </el-table-column>
        <el-table-column
            prop="sfaa012"
            label="生产数量">
        </el-table-column>
        <el-table-column
            prop="sfaa071"
            label="齐料套数">
        </el-table-column>
        <el-table-column
            prop="sfaa050"
            label="总入库数">
        </el-table-column>
        <el-table-column
            prop="sfba006"
            label="发料料号">
        </el-table-column>
        <el-table-column
            prop="sfba008"
            label="特性">
        </el-table-column>
        <el-table-column
            prop="imaal3"
            label="发料品名">
        </el-table-column>
        <el-table-column
            prop="imaal4"
            label="发料规格">
        </el-table-column>
        <el-table-column
            prop="sfba013"
            label="总应发数量">
        </el-table-column>
        <el-table-column
            prop="sfba016"
            label="总应发数量">
        </el-table-column>
        <el-table-column
            prop="sfba014"
            label="单位">
        </el-table-column>
        <el-table-column
            prop="sfba010"
            label="QPA分子">
        </el-table-column>
        <el-table-column
            prop="sfba011"
            label="QPA分母">
        </el-table-column>
        <el-table-column
            prop="num9"
            label="入库数"
            fixed="right">
        </el-table-column>
        <el-table-column
            prop="sfdc017"
            label="领料数量"
            fixed="right">
        </el-table-column>
      </el-table>
    </el-row>
    <pagination
        :v_show="total > 0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="loadTable"
    />
  </div>
</template>

<script>
import {queryShopOrderList, findWorkShop, exportStockMessage} from '@/api/T100/shopOrderCompleteStockQuery'

export default {
  name: "shopordercompletestockquery",
  data() {
    return {
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        sfaadocno: '',
        value: [],
        sfaa068: ''
      },
      rules: {},
      shopOrderData: [],
      total: 0,
      searchWorkCenter: findWorkShop,
      WorkCenterFields: [{label: '成本中心', prop: 'sfaa068'}],
      loading: false
    }
  },
  methods: {
    loadTable() {
      this.queryShopOrderCompleteStock()
    },
    queryShopOrderCompleteStock() {
      if (this.queryForm.sfaadocno === null || this.queryForm.sfaadocno === '') {
        this.$message.error('必须指定工单单号!')
        return
      }
      if (!this.queryForm.sfaadocno.trim().includes("D-GD")) {
        this.$message.error('工单单号格式必须填写正确!例如D-GD01后面可不写')
        return
      }
      this.$message.warning('当前页查询较慢,请耐心等待~')
      this.loading = true
      this.queryForm.sfaa068 = this.$refs.searchWorkCenter.queryParams.keyword
      queryShopOrderList(this.queryForm).then(res => {
        if (res.code == '200') {
          this.shopOrderData = res.rows
          this.total = res.total
          this.loading = false
        }
      })
    },
    excelSupport() {
      this.$confirm('是否确认导出工单完工入库明细Excel?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.queryForm.sfaa068 = this.$refs.searchWorkCenter.queryParams.keyword
        exportStockMessage(this.queryForm).then(resp => {
          const reader = new FileReader()
          reader.readAsDataURL(resp)
          reader.onload = (e) => {
            const a = document.createElement('a')
            a.download = `工单完工入库领料.xls`
            a.href = e.target.result
            document.body.appendChild(a)
            a.click()
            this.$message.success('导出成功')
            document.body.removeChild(a)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出'
        })
      })
    },
    resetForm() {
      this.$refs.searchWorkCenter.queryParams.keyword = ''
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        sfaadocno: '',
        value: [],
        sfaa068: ''
      }
    }
  },
  created() {

  }
}
</script>

<style scoped lang="scss">
.main_container {
  margin: 5px;
}
</style>
